<template>
	<div class="widget-poi-filter flex flex-wrap" :class="[direction,{'flex-reverse':direction==='right'}]">
		<div @click="switchPoi(poi)" class="black-bg widget-poi-filter-button button-panel hover-border-active" v-for="poi in value" :key="poi.id" :class="{active:poi.show}">
			<div class="widget-poi-filter-button-icon primary-bg-dark round" :class="poi.icon" />
			{{poi.label}}
		</div>
		<div @click="selectAll" class="black-bg widget-poi-filter-button button-panel active  hover-border-active">全选</div>
	</div>
</template>

<script>
export default {
	name: "WidgetPoiFilter",
	props: {
		value: {
			type: Array,
			default: () => {
				return [];
			}
		},
		direction: {
			type: String,
			default: "left"
		}
	},
	methods: {
		switchPoi(poi) {
			poi.show = !poi.show;
		},
		selectAll() {
			this.selected = !this.selected;
			this.value.forEach(i => (i.show = this.selected));
		}
	}
};
</script>

<style lang="scss" scoped>
.widget-poi-filter {
	.widget-poi-filter-button {
		margin-bottom: 8px;
		display: flex;
		align-items: center;
	}
	.widget-poi-filter-button-icon {
		padding: 4px;
		margin-right: 8px;
	}
	&.left .widget-poi-filter-button {
		margin-right: 8px !important;
	}
	&.right .widget-poi-filter-button {
		margin-left: 8px !important;
	}
}
</style>